<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 文本和字体属性、列表属性</title>
    <style>
      /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
      @font-face {
        font-family: "阿里妈妈东方大楷 Regular";
        font-weight: 400;
        src: url("//at.alicdn.com/wf/webfont/4x2m3dtSPsi6/jMlZDOKV0NFS.woff2") format("woff2"),
          url("//at.alicdn.com/wf/webfont/4x2m3dtSPsi6/bS4vn50LwCq3.woff") format("woff");
        font-display: swap;
      }

      .custom-font {
        font-family: "阿里妈妈东方大楷 Regular";
        font-size: 30px;
      }

      .color-attribute-english-words {
        color: blue;
      }

      .color-attribute-rgb {
        color: rgb(200, 111, 200);
      }

      .color-attribute-rgba {
        color: rgb(050, 111, 000, 0.5);
      }

      .font_size {
        font-size: 30px;
      }

      .font_weight {
        font-weight: 700;
      }

      .font_style {
        font-style: italic;
      }

      .font_family {
        font-family: "宋体";
      }

      .text_decoration {
        text-decoration: underline dashed #f0f 10px;
      }

      .text_indent {
        text-indent: 2em;
      }

      .line_height {
        line-height: 2;
        border: 1px solid #000;
      }

      .font_attribute {
        font: italic 700 30px/2 "宋体";
        border: 1px solid #000;
      }

      div.left {
        text-align: left;
      }

      div.center {
        text-align: center;
      }

      div.right {
        text-align: right;
      }

      .word_spacing {
        word-spacing: 50px;
      }

      .letter_spacing {
        letter-spacing: 10px;
      }

      ul li {
        list-style: none;
      }

      .box1 {
        height: 200px;
        width: 400px;
        border: dashed 5px #ccc;
        line-height: 200px;
        text-align: center;
      }

      .box2 {
        word-spacing: 10px;
      }

      .box2 span {
        letter-spacing: 20px;
      }

      /* 排版 */
      h2 {
        font-size: 30px;
        text-align: center;
      }

      .header span {
        background-color: #ccc;
        color: #ff0000;
      }

      .header a {
        color: #ff0000;
      }

      .header {
        color: #666;
        text-align: center;
        font-size: 14px;
      }

      p {
        text-indent: 2em;
        line-height: 2;
      }

      .img {
        text-indent: 0;
        text-align: center;
      }

      main {
        width: 1024px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <h1>CSS 文本和字体属性、列表属性</h1>
    <p class="color-attribute-english-words">color 属性-英文单词颜色值</p>

    <p class="color-attribute-hex">color 属性 - 十六进制表示法</p>

    <p class="color-attribute-rgb">color 属性 - rgb() 表示法</p>

    <p class="color-attribute-rgba">color 属性 - rgba() 表示法</p>

    <p class="font_size">font-size 属性，字体大小</p>

    <p class="font_weight">font-weight 属性</p>

    <p class="font_style">font-style 字体样式</p>

    <p class="font_family">font-family 字体类型</p>

    <p class="custom-font">艾编程-清心老师每晚直播授课css教学部分 @font-face 自定义字体</p>

    <p class="text_decoration">text-decoration 修饰线</p>

    <p class="text_indent">text-indent 首行缩进</p>

    <p class="line_height">line-height 行高</p>

    <p class="font_attribute">font 属性</p>

    <div class="left">text-align 水平居左</div>
    <div class="center">text-align 水平居中</div>
    <div class="right">text-align 水平居右</div>

    <p class="word_spacing">word spacing中文不起作用</p>

    <p class="letter_spacing">letterspacing中文起作用</p>

    <ul>
      <li>前端</li>
      <li>后端</li>
      <li>大数据</li>
      <li>运维</li>
    </ul>

    <div class="box1">单行文本水平垂直居中</div>

    <div class="box2">
      English words
      <span>中文间距</span>
    </div>

    <h2>新闻排版</h2>
    <hr />
    <h2>本次15天挑战计划，升级为30天挑战计划</h2>

    <main>
      <p class="header">
        <span>原创</span>
        2025-05-27 08:18 ·
        <a href="#">艾编程日报</a>
      </p>

      <p>考虑到部分学员的基础水平不扎实，所以重启计划，花15天的时间系统全面讲解 CSS 。</p>

      <p class="img"><img src="images/pic.jpg" alt="海报" /></p>
      <p>本些CSS课程，会配套30个精挑细选的css案例和88个CSS布局技巧。</p>
      <p>这88个CSS案例并非随意凑出来的，而是从实际开发场景中精挑细选，提炼出来的。几乎涵盖了99%的CSS布局场景，能扫除你布局路上的一切障碍，让你精通CSS 布局。</p>
      <p>
        如果你html+css基础都学完了，面对布局仍然没有思路，学完这88个案例，你将成为CSS高手。[哇R]你学习的不仅仅是88个 CSS 案例，而是上百种CSS
        的布局思路和技巧。能让你真真吃透每个CSS知识点，并对CSS 运用自如。
      </p>

      <p>艾编程日报&nbsp;清心&nbsp;摄</p>
    </main>
  </body>
</html>
